@import './variable.scss';

::v-deep .fence-alarm-dialog {
  height: 60%;
  width: 50%;
  background-color: #1a4969;

  .el-dialog__header {
    padding: px(10) px(20);
    text-align: center;
    .el-icon-close,
    .el-dialog__title {
      color: #fff;
      font-size: px(20);
      line-height: px(24);
      height: px(24);
    }
  }

  .el-dialog__body {
    padding: px(10) px(20) 0;
    height: calc(100% - #{px(50)});
  }

  .container {
    height: 100%;
    width: 100%;
    position: relative;

    .search-box{
      margin-bottom: px(5);
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      
      .search-box-item{
        padding: px(3) px(5);
      }

      .el-input,.el-input__icon{
        font-size: px(16);
        line-height: px(32);
      }
      .el-input__inner{
        background-color: #1a4969;
        height: px(32);
        line-height: px(32);
        color: #fff;
      }

      .el-range-editor{
        height: px(32);
        font-size: px(14);
        padding: 0;
        width: auto;
        
        .el-range-input{
          font-size: px(16);
          background-color: #1a4969;
          color: #fff;
        }
        .el-range-separator{
          line-height: px(32);
          padding: 0 px(3);
          font-size: px(16);
        }
      }
      .el-range__icon,.el-range__close-icon{
        font-size: px(16);
        line-height: px(32);
      }

      .el-button {
        background-color: #1a4969;
        color: #fff;
        height: px(32);
        width: px(70);
        font-size: px(14);
        border-radius: px(5);
        padding: 0;
        &:hover {
          background-color: #409eff;
        }
      }
    }
    .el-table {
      background-color: #143e5d;
      font-size: px(16);
      .custom-table-hearder{
        th{
          padding: 0;
          height: px(28);
          background-color: #1c76b7;
          color: #fff;
        }
        .cell{
          background-color: #1c76b7;
          color: #fff;
        }
      }
      
      td {
        border-bottom: 1px solid #2e67a8;
      }
      tr:hover > td {
        background-color: #2f6b8d;
      }

      .table-cell-custom {
        background-color: #1a4969;
        color: #fff;
        padding: 0;
        height: px(28);
      }

      .el-table__body tr.current-row > td {
        background: #3083bb !important;
      }
      
    }
    .pagination-container .el-pagination__total{
      color: #fff;
      
    }

    .footer-btn{
      // height: px(28);
      position: absolute;
      right: 0;
      bottom: px(10);
      .el-button{
        width: px(70);
      }
    }
  }
  .el-button{
    font-size: px(16);
    padding: px(5) px(10);
    border-radius: px(4);
    height: px(32);
    &:hover{
      background-color: #29628b;
    }
    &.is-disabled{
      background-color: gray;
    }
  }
}

